import React, { useState } from "react";
import { Table, Button, Modal, Form, Input, message } from "antd";
import { PlusOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons";
function Home() {
  const [total, setTotal] = useState("");
  // 数据列表
  const [data, setData] = useState([
    {
      key: 1,
      id: "1",
      title: "世界以你环环相扣",
      role: "小说",
      name: "admin",
      source: "654321@mall.com",
      number: 3,
      time: "2017-01-01 11:11:42",
    },
    {
      key: 2,
      id: "2",
      title: "世界以你环环相扣",
      role: "小说",
      name: "凤羽",
      source: "2992272@mall.com",
      number: 2,
      time: "2014-01-01 11:14:42",
    },
    {
      key: 3,
      id: "3",
      title: "斗罗大陆",
      role: "小说",
      name: "唐三",
      source: "72820202@mall.com",
      number: 1,
      time: "2015-03-01 14:11:42",
    },
    {
      key: 4,
      id: "4",
      title: "斗破苍穹",
      role: "小说",
      name: "萧炎",
      source: "829321@mall.com",
      number: 4,
      time: "2017-01-01 11:11:42",
    },
    {
      key: 5,
      id: "5",
      title: "妖神记",
      role: "小说",
      name: "聂离",
      source: "984321@mall.com",
      number: 5,
      time: "2015-01-01 11:11:42",
    },
    {
      key: 6,
      id: "6",
      title: "武庚纪",
      role: "小说",
      name: "武庚",
      source: "28299221@mall.com",
      number: 6,
      time: "2019-01-01 11:11:42",
    },
    {
      key: 7,
      id: "7",
      title: "天行九歌",
      role: "小说",
      name: "天网",
      source: "1274321@mall.com",
      number: 7,
      time: "2020-01-01 11:11:42",
    },
    {
      key: 8,
      id: "8",
      title: "哪吒之魔童降世",
      role: "电影",
      name: "饺子",
      source: "134321@mall.com",
      number: 8,
      time: "2022-01-08 11:11:42",
    },
    {
      key: 9,
      id: "9",
      title: "特朗普当选米国总统",
      role: "新闻",
      name: "杂志新闻",
      source: "784321@mall.com",
      number: 9,
      time: "2024-01-01 11:11:42",
    },
    {
      key: 10,
      id: "10",
      title: "从你的全世界路过",
      role: "小说",
      name: "不知名的幻",
      source: "784321@mall.com",
      number: 10,
      time: "2019-01-01 11:11:42",
    },
    {
      key: 11,
      id: "11",
      title: "环太平洋",
      role: "小说",
      name: "你的眼泪我的痛",
      source: "29321@mall.com",
      number: 11,
      time: "2019-01-01 11:11:42",
    },
    {
      key: 12,
      id: "12",
      title: "绝世武魂",
      role: "小说",
      name: "赢雷",
      source: "284321@mall.com",
      number: 12,
      time: "2023-01-08 11:11:42",
    },
  ]);
  // 控制模态框显示
  const [isModalVisible, setIsModalVisible] = useState(false);

  // 当前编辑的记录
  const [currentRecord, setCurrentRecord] = useState(null);

  // 表单引用
  const [form] = Form.useForm();

  // 表格列配置
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "文章标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "文章类型",
      dataIndex: "role",
      key: "role",
    },
    {
      title: "作者",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "文章来源",
      dataIndex: "source",
      key: "source",
    },
    {
      title: "排序",
      dataIndex: "number",
      key: "number",
    },
    {
      title: "录入时间",
      dataIndex: "time",
      key: "time",
    },

    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <div>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button
            type="link"
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record.key)}
          >
            删除
          </Button>
        </div>
      ),
    },
  ];
  // 添加或更新数据
  const handleSave = () => {
    form.validateFields().then((values) => {
      if (currentRecord) {
        // 更新操作
        const newData = data.map((item) =>
          item.key === currentRecord.key ? { ...item, ...values } : item
        );
        setData(newData);
        message.success("编辑成功");
      } else {
        // 添加操作;
        const newKey = data.length + 1;
        const newData = [
          ...data,
          {
            key: newKey,
            id: values.id,
            name: values.name,
            number: values.number,
            role: values.role,
            department: values.department,
            password: values.password,
          },
        ];
        setData(newData);
        message.success("添加成功");
      }
      setIsModalVisible(false);
      form.resetFields();
    });
  };

  // 删除数据
  const handleDelete = (key) => {
    const newData = data.filter((item) => item.key !== key);
    Modal.confirm({
      title: "温馨提示",
      content: "确定要删除吗？",
      onOk() {
        // 点击确认后的操作
        console.log("删除操作已执行");
        setData(newData);
        message.success("删除成功");
      },
      onCancel() {
        // 点击取消后的操作
        console.log("取消删除");
        message.info("已取消删除");
      },
    });
  };

  // 编辑数据
  const handleEdit = (record) => {
    setCurrentRecord(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  // 取消模态框
  const handleCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
  };
  return (
    <div>
      <Form
        name="basic"
        layout="inline"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 3000,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item label="请输入用户名" name="name">
          <Input />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
      <Button
        type="primary"
        onClick={() => {
          setCurrentRecord(null);
          form.resetFields();
          setIsModalVisible(true);
        }}
        icon={<PlusOutlined />}
      >
        新增
      </Button>
      <Table
        columns={columns}
        dataSource={data}
        rowKey="key"
        style={{ marginTop: 16 }}
        pagination={{
          defaultPageSize: "3",
          showSizeChanger: true,
          showQuickJumpe: true,
        }}
      />
      <Modal
        title={currentRecord ? "编辑管理员" : "新增管理员"}
        open={isModalVisible}
        onOk={handleSave}
        onCancel={handleCancel}
      >
        <Form form={form}>
          <Form.Item name="title" label="文章标题">
            <Input placeholder="请输入文章标题" />
          </Form.Item>
          <Form.Item name="role" label="文章类型">
            <Input placeholder="请输入文章类型" />
          </Form.Item>
          <Form.Item name="name" label="作者">
            <Input placeholder="请输入作者" />
          </Form.Item>
          <Form.Item name="source" label="文章来源">
            <Input placeholder="请输入文章来源" />
          </Form.Item>
          <Form.Item name="number" label="排序">
            <Input placeholder="请输入排序" />
          </Form.Item>
          <Form.Item name="time" label="录入时间">
            <Input placeholder="请输入录入时间" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default Home;
